<template>
  <div class="rescue-detail">
    <div class="container">
      <!-- 页面标题 -->
      <div class="page-header">
        <el-button @click="goBack" type="primary" class="back-btn">
          <i class="el-icon-arrow-left"></i> 返回
        </el-button>
        <h1>救助信息详情</h1>
        <div class="status-badge" :class="getStatusClass(rescueInfo.status)">
          {{ getStatusText(rescueInfo.status) }}
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <el-card>
          <div style="text-align: center; padding: 40px;">
            <i class="el-icon-loading" style="font-size: 24px; color: #409EFF;"></i>
            <p style="margin-top: 16px; color: #606266;">加载中...</p>
          </div>
        </el-card>
      </div>

      <!-- 详情内容 -->
      <div v-else-if="rescueInfo.id" class="detail-container">
        <!-- 基本信息 -->
        <el-card class="info-section">
          <div slot="header" class="section-header">
            <i class="el-icon-info"></i>
            <span>基本信息</span>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <label>救助标题：</label>
              <span>{{ rescueInfo.title }}</span>
            </div>

            <div class="info-item">
              <label>动物种类：</label>
              <span>{{ rescueInfo.species }}</span>
            </div>

            <div class="info-item">
              <label>体型大小：</label>
              <span>{{ rescueInfo.size || '未知' }}</span>
            </div>

            <div class="info-item">
              <label>估计年龄：</label>
              <span>{{ rescueInfo.age || '未知' }}</span>
            </div>

            <div class="info-item">
              <label>性别：</label>
              <span>{{ rescueInfo.gender || '未知' }}</span>
            </div>

            <div class="info-item">
              <label>紧急程度：</label>
              <span class="urgency-tag" :class="getUrgencyClass(rescueInfo.urgency)">
                {{ rescueInfo.urgency }}
              </span>
            </div>
          </div>
        </el-card>

        <!-- 发现地点信息 -->
        <el-card class="info-section">
          <div slot="header" class="section-header">
            <i class="el-icon-location"></i>
            <span>发现地点</span>
          </div>

          <div class="info-grid">
            <div class="info-item full-width">
              <label>详细地址：</label>
              <span>{{ rescueInfo.location }}</span>
            </div>

            <div class="info-item">
              <label>发现时间：</label>
              <span>{{ formatTime(rescueInfo.foundDate) }}</span>
            </div>
          </div>
        </el-card>

        <!-- 健康状况 -->
        <el-card class="info-section">
          <div slot="header" class="section-header">
            <i class="el-icon-first-aid-kit"></i>
            <span>健康状况</span>
          </div>

          <div class="info-grid">
            <div class="info-item">
              <label>健康状况：</label>
              <span class="health-tag" :class="getHealthClass(rescueInfo.healthStatus)">
                {{ rescueInfo.healthStatus }}
              </span>
            </div>

            <div class="info-item full-width">
              <label>详细描述：</label>
              <p class="description-text">{{ rescueInfo.description }}</p>
            </div>

            <div class="info-item full-width" v-if="rescueInfo.injuries">
              <label>伤病情况：</label>
              <p class="description-text">{{ rescueInfo.injuries }}</p>
            </div>
          </div>
        </el-card>

        <!-- 照片展示 -->
        <el-card class="info-section">
          <div slot="header" class="section-header">
            <i class="el-icon-picture"></i>
            <span>宠物照片</span>
          </div>

          <div class="photo-gallery">
            <img :src="rescueInfo.image" alt="宠物照片" />
          </div>
        </el-card>

        <!-- 联系信息 -->
        <el-card class="info-section">
          <div slot="header" class="section-header">
            <i class="el-icon-phone"></i>
            <span>联系信息</span>
          </div>

          <div class="info-grid">
            <div class="info-item">
              <label>联系人：</label>
              <span>{{ rescueInfo.contactName }}</span>
            </div>

            <div class="info-item">
              <label>联系电话：</label>
              <span class="phone-number">{{ rescueInfo.contactPhone }}</span>
            </div>

            <div class="info-item full-width" v-if="rescueInfo.contactTime">
              <label>最佳联系时间：</label>
              <span>{{ rescueInfo.contactTime }}</span>
            </div>
          </div>
        </el-card>

        <!-- 发布信息 -->
        <el-card class="info-section">
          <div slot="header" class="section-header">
            <i class="el-icon-time"></i>
            <span>发布信息</span>
          </div>

          <div class="info-grid">
            <div class="info-item">
              <label>发布时间：</label>
              <span>{{ formatTime(rescueInfo.createTime) }}</span>
            </div>

            <div class="info-item" v-if="rescueInfo.updateTime">
              <label>更新时间：</label>
              <span>{{ formatTime(rescueInfo.updateTime) }}</span>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 数据不存在 -->
      <div v-else class="empty-container">
        <el-card>
          <div style="text-align: center; padding: 40px;">
            <i class="el-icon-warning" style="font-size: 48px; color: #E6A23C;"></i>
            <h3 style="margin: 16px 0; color: #606266;">救助信息不存在</h3>
            <p style="color: #909399;">该救助信息可能已被删除或不存在</p>
            <el-button type="primary" @click="goBack" style="margin-top: 16px;">
              返回列表
            </el-button>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 图片预览对话框 -->
    <el-dialog :visible.sync="imagePreviewVisible" width="60%" center>
      <img :src="previewImageUrl" style="width: 100%; height: auto;" />
    </el-dialog>
  </div>
</template>

<script>
import { getRescueDetail } from '@/api/rescue-info'

export default {
  name: 'RescueDetail',
  data() {
    return {
      loading: true,
      rescueInfo: {},
      imagePreviewVisible: false,
      previewImageUrl: ''
    }
  },
  created() {
    this.loadRescueDetail()
  },
  methods: {
    async loadRescueDetail() {
      try {
        const id = this.$route.params.id
        if (!id) {
          this.$message.error('缺少救助信息ID')
          this.goBack()
          return
        }

        this.loading = true
        const response = await getRescueDetail(id)
        if (response.code === 200) {
          this.rescueInfo = response.data || {}
        } else {
          this.$message.error(response.message || '获取救助信息失败')
        }
      } catch (error) {
        console.error('获取救助信息详情失败:', error)
        this.$message.error('获取救助信息失败，请重试')
      } finally {
        this.loading = false
      }
    },

    goBack() {
      this.$router.go(-1)
    },

    previewImage(url) {
      this.previewImageUrl = url
      this.imagePreviewVisible = true
    },

    formatTime(time) {
      if (!time) return '未知'
      return new Date(time).toLocaleString('zh-CN')
    },

    getStatusText(status) {
      const statusMap = {
        1: '待救助',
        2: '救助中',
        3: '已救助',
        4: '已关闭'
      }
      return statusMap[status] || '未知状态'
    },

    getStatusClass(status) {
      const classMap = {
        1: 'status-pending',
        2: 'status-processing',
        3: 'status-completed',
        4: 'status-closed'
      }
      return classMap[status] || ''
    },

    getUrgencyClass(urgency) {
      const classMap = {
        '一般': 'urgency-normal',
        '紧急': 'urgency-urgent',
        '非常紧急': 'urgency-critical'
      }
      return classMap[urgency] || ''
    },

    getHealthClass(health) {
      const classMap = {
        '良好': 'health-good',
        '受伤': 'health-injured',
        '生病': 'health-sick',
        '危重': 'health-critical'
      }
      return classMap[health] || ''
    }
  }
}
</script>

<style scoped>
.rescue-detail {
  background: #f8f9fa;
  min-height: 100vh;
  padding: 20px 0;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  position: relative;
}

.back-btn {
  margin-right: 16px;
}

.page-header h1 {
  margin: 0;
  color: #2c3e50;
  font-size: 24px;
  flex: 1;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-pending {
  background: #fff3cd;
  color: #856404;
}

.status-processing {
  background: #d1ecf1;
  color: #0c5460;
}

.status-completed {
  background: #d4edda;
  color: #155724;
}

.status-closed {
  background: #f8d7da;
  color: #721c24;
}

.loading-container,
.detail-container,
.empty-container {
  margin-top: 20px;
}

.info-section {
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #2c3e50;
}

.section-header i {
  margin-right: 8px;
  color: #409EFF;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: flex-start;
}

.info-item.full-width {
  grid-column: 1 / -1;
}

.info-item label {
  font-weight: 600;
  color: #606266;
  margin-right: 8px;
  min-width: 100px;
  flex-shrink: 0;
}

.info-item span {
  color: #2c3e50;
}

.description-text {
  margin: 0;
  line-height: 1.6;
  color: #2c3e50;
  white-space: pre-wrap;
}

.urgency-tag,
.health-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.urgency-normal {
  background: #e8f5e8;
  color: #52c41a;
}

.urgency-urgent {
  background: #fff3cd;
  color: #fa8c16;
}

.urgency-critical {
  background: #ffebee;
  color: #f5222d;
}

.health-good {
  background: #e8f5e8;
  color: #52c41a;
}

.health-injured {
  background: #fff3cd;
  color: #fa8c16;
}

.health-sick {
  background: #fff1f0;
  color: #ff7875;
}

.health-critical {
  background: #ffebee;
  color: #f5222d;
}

.phone-number {
  font-weight: 600;
  color: #409EFF;
}

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.photo-item {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s;
}

.photo-item:hover {
  transform: scale(1.05);
}

.photo-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
</style>